myapp.views.MuseumDetailMap = Ext.extend(Ext.Panel, {
		initComponent : function () {
			/*console.log('MuseumDetailMap inited!');
			console.log('MuseumDetailMap thinks we\'re online? ' + myapp.isOnline);
			if (myapp.isOnline){
			console.log('setting up map');*/
			// doesn't need to be centered, yet. We don't have a record
			//////// var latlng = new google.maps.LatLng(43.666667, -79.416667);
			//this.map = new Ext.Map({
			//title: 'Map',        // Name that appears on this tab
			//getLocation: true,   // Gets user's current location
			//mapOptions: {        // Used in rendering map
			//zoom: 14//,
			/////////center: latlng
			//}
			//});
			//this.items = [this.map];
			//}
			myapp.views.MuseumDetailMap.superclass.initComponent.apply(this, arguments);
		},
		dockedItems : [{
				record : {},
				xtype : 'toolbar',
				title : 'Location',
				items : [{
						id : 'back_to_museum',
						text : 'Back',
						ui : 'back',
						listeners : {
							'tap' : function () {
								console.log('this.record.getId: ' + myapp.views.MuseumDetailMap.record.getId());
								Ext.dispatch({
									controller : myapp.controllers.museums,
									action : 'show',
									id : myapp.views.MuseumDetailMap.record.getId(),
									animation : {
										type : 'slide',
										direction : 'right'
									}
								});
							}
						}
					}
				]
			}
		],
		activate : function (p) {
			console.log(' museumDetailMap activated!');
			p.body.scrollTo("top", 0, true);
		},
		updateWithRecord : function (record) {
			console.log('in updateWithRecord!');
			myapp.views.MuseumDetailMap.record = record;
			
			if (myapp.views.MuseumDetailMap.record.data.latitude == '' ||
				myapp.views.MuseumDetailMap.record.data.longitude == '') {
				console.log('record has no geometry.');
				myapp.views.museumDetailMap.geoCodeAddress(record);
			} else {
				console.log('Record has geometry.');
				//myapp.views.museumDetailMap.setupMarker(record);
				//myapp.views.museumDetailMap.centerAndZoomMap(record);
			}
		},
		setupMarker : function (record, theMap) {
			console.log('In setupMarker');
			var location = new google.maps.LatLng(record.data.latitude, record.data.longitude);
			var marker = new google.maps.Marker({
					//map : myapp.views.museumDetailMap.map.map,
					map : theMap,
					position : location,
					animation : google.maps.Animation.DROP,
					title : record.data.museumName
				});
			var infowindow = new google.maps.InfoWindow({
					//content : myapp.views.museumDetailMap.getContentString(record)
					content : record.data.museumName,
					maxWidth: 200
				});
			google.maps.event.addListener(marker, 'click', function () {
				infowindow.open(theMap, marker);
			});
			//myapp.views.museumDetailMap.centerAndZoomMap(record);
		},
		geoCodeAddress : function (address) {
			console.log('In geoCodeAddress');
			var g = myapp.views.museumDetailMap.geocoder;
			g.geocode({
				'address' : address
			}, function (results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					//alert('Status OK!');
					map.map.setCenter(results[0].geometry.location);
					var marker = new google.maps.Marker({
							map : map.map,
							position : results[0].geometry.location,
							animation : google.maps.Animation.DROP,
							title : myapp.views.museumDetailMap.record.data.name
						});
					var infowindow = new google.maps.InfoWindow({
							//content: contentString
							content : myapp.views.museumDetailMap.getContentString()
						});
					google.maps.event.addListener(marker, 'click', function () {
						infowindow.open(map, marker);
					});
				} else {
					console.log("Geocode was not successful for the following reason: " + status);
				}
			});
		},
		getContentString : function (record) {
			/*var theReturn = '<div class="mapMarkerInfowindow">' +
				'<h1>' + record.data.museumName + '</h1>' +
				'</div>';*/
			var theReturn = '<div>' + record.data.museumName + '</div>';
			return theReturn;
		},
		centerAndZoomMap : function (record) {
			console.log('centering and zooming');
			//var location = new google.maps.LatLng(-123.401184, 48.461084);
			var location = new google.maps.LatLng(record.data.latitude, record.data.longitude);
			// TODO below latlngbounds is null so erroring. Because map object not created fast enough?
			// was working when we were geocoding everything
			//map2.map.setCenter(myapp.models.markers.latlngbounds.getCenter(), map2.map.fitBounds(myapp.models.markers.latlngbounds));
			//myapp.views.museumDetailMap.map.mapOptions.center = location;
			myapp.views.museumDetailMap.map
			//myapp.views.museumDetailMap.map.setCenter(location);
			myapp.views.museumDetailMap.setupMarker(record);
		},
		addMap : function (record) {
			var data = record.data;
			var pos = new google.maps.LatLng(data.latitude, data.longitude);
			//var desc = '<div class=\'usgsMapInfoWindow\'>' + data.title + '<br/>' + data.description + '</div>';
			var isRefreshRequired = false;
			if (this.getComponent(0).getXTypes() === 'box/map') {
				console.log('XTypes === box/map');
				this.remove(this.getComponent(0));
				isRefreshRequired = true;
			}
			
			// Create an array of styles.
			var pinkParksStyles = [{
					featureType : "all",
					stylers : [
					           {invert_lightness : true} //,
					           //{ saturation: -80 }
					]
				}
				/*,{
				featureType: "poi.park",
				stylers: [{ hue: "#ff0023" },{ saturation: 40 }
				]
				}*/
			];
			
			// Create a new StyledMapType object, passing it the array of styles,
			// as well as the name to be displayed on the map type control.
			var pinkMapType = new google.maps.StyledMapType(pinkParksStyles, {
					name : "Pink Parks"
				});
			
			var map = new Ext.Map({
					fullscreen : true,
					title : data.title,
					markerPos : pos,
					mapOptions : {
						zoom : 13,
						//,mapTypeId: google.maps.MapTypeId.TERRAIN
						center : pos,
						//mapTypeControl : true,
						panControl : false,
						//scrollwheel : false,
						streetViewControl : false,
						mapTypeControlOptions : {
							//mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
						}
						/*,mapTypeControlOptions: {
						style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
						}*/
					},
					listeners : {
						delay : 500,
						afterrender : function () {
							console.log('afterrender');
							//addMarker(this.map, this.markerPos, this.markerDesc);
							myapp.views.museumDetailMap.setupMarker(myapp.views.MuseumDetailMap.record, this.map);
						}
					}
				});
			
			//Associate the styled map with the MapTypeId and set it to display.
			//map.map.mapTypes.set('pink_parks', pinkMapType);
			//map.map.setMapTypeId('pink_parks');
			this.add(map);
			console.log('adding map');
			if (isRefreshRequired)
				this.doLayout();
		}
	});
